import React, { useState } from 'react'
import { SearchBar } from 'antd-mobile'
import '../css/search.css'
import List from "./List"
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

export default function Search() {
    let navigate = useNavigate()
    let [searchtext, setsearchtext] = useState("")
    let [hostarr, sethostarr] = useState(["耳环", "手表", "项链", "戒指", "项链", "手环", "墨镜", "帽子"])
    // 开始搜索'
    let search = async (e) => {
        let { data } = (await axios.get("/goods/searchgoods", { params: { searchname: e } })).data
        // 保存到本地
        localStorage.setItem("searchname", JSON.stringify(data))
        // 跳转页面
        navigate("/send")
    }

    let hostkey = (item) => {
        setsearchtext(item)
    }
    let changetext = (e) => {
        setsearchtext(e)
    }
    return (
        <div>
            <SearchBar onChange={(e)=>{changetext(e)}} clearable={true} value={searchtext} onSearch={(e)=>{search(e)}} placeholder='Ins风搭配' cancelText={"店内搜索"} showCancelButton={() => true} />
            {/* 热门搜索 */}
            <div className='search_box'>
                <h4>热门搜索</h4>
                <div className='search_host'>
                    {
                        hostarr.map((item, index) => {
                            return <div onClick={()=>{hostkey(item)}} className='search_item' key={index}>{item}</div>
                        })
                    }
                </div>
            </div>
        </div>
    )
}
